<template>
	<div class="wrap">
		<team-header title="官方公告"></team-header>
		<div class="announce">
			<div class="title">
				<span>{{ showAnnouncement.NOTICE_TITLE || '' }}</span>
				<span><i class="iconfont icon-shijian"></i>
					{{ showAnnouncement.SUBMIT_DATE || '' }}
				</span>
			</div>
			<div class="para">
				{{ showAnnouncement.NOTICE_TEXT || '' }}
			</div>
		</div>
		<div class="history">
			<div class="tlt">历史公告</div>
			<div class="announce-list">
				<div class="announce-item collapse-right" v-for="(item, index) in hisAnnouceList" :key="index">
					<span>{{ item.NOTICE_TITLE }}</span>
					<span>{{ item.SUBMIT_DATE }}</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
  import TeamHeader from '../TeamHeader'
  import { mapState } from 'vuex'

  export default {
		name: 'Annoumcement',
		components: {
			TeamHeader
    },
		computed: {
			...mapState({
				hisAnnouceList: state => state.team.announcementList
			}),
			showAnnouncement () {
				const list = this.$store.state.team.announcementList
				return list.length > 0 ? list[0] : {}
			}	
		}
  }
</script>

<style lang="less" scoped>

.collapse-right {
	position: relative;
	font-family: "iconfont" !important;
	font-size: 24px;
	font-style: normal;
	color: #ccc;
	-webkit-font-smoothing: antialiased;
	&:after {
		content: "\E604";
		display: block;
		position: absolute;
		right: 2%;
		top: 48%;
		transform: translateY(-50%);
	}
}

.paddingLR {
	padding-left: 20px;
	padding-right: 20px;
}

.wrap {
	background-color: #fff;
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: scroll;
	z-index: 10000;
}

.announce {
	background-color: #f7743a;
	padding-bottom: 30px;
	margin-top: 44px;
	.paddingLR;
	.title {
		height: 60px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		span {
			color: #fff;
			&:nth-of-type(1) {
				font-size: 17px;
			}
			&:nth-of-type(2) {
				font-size: 14px;
				.icon-shijian {
					color: #fffbbc;
					margin-right: 3px;
				}
			}
		}
	}
	.para {
		font-size: 12px;
		color: #fff;
		text-align: justify;
	}
}

.history {
	.tlt {
		position: relative;
		display: flex;
		align-items: center;
		height: 36px;
		padding-left: 14px;
		padding-right: 14px;
		font-size: 16px;
		color: #565656;
		&:before {
			content: '';
			display: inline-block;
			width: 4px;
			height: 13px;
			margin-right: 10px;
			margin-bottom: 2px;
			background-color: #f7743a;
		}
	}
	.announce-list {
		border-top: 1px solid #f6f6f6;
		border-bottom: 1px solid #f6f6f6;
	}
	.announce-item {
		display: flex;
		height: 56px;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #dfdfdf;
		padding-left: 20px;
		padding-right: 40px;
		&:last-child {
			border-bottom: none;
		}
		span {
			&:nth-of-type(1) {
				color: #565656;
				font-size: 14px;
			}
			&:nth-of-type(2) {
				color: #999;
				font-size: 12px;
			}
		}
	}
}
</style>